<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input 
          type="text" 
          placeholder="请输入商品名称" 
          v-model="searchText" 
          @confirm="handleSearch"
          confirm-type="search"
        />
        <view class="clear-btn" @click="clearSearch" v-if="searchText">
          <uni-icons type="clear" size="18" color="#999"></uni-icons>
        </view>
      </view>
      <text class="cancel-btn" @click="handleSearch">搜索</text>
    </view>
    
    <!-- 商品列表 -->
    <scroll-view 
      class="goods-list" 
      scroll-y 
      @scrolltolower="loadMore"
      :style="{height: scrollHeight + 'px'}"
    >
      <view 
        class="goods-item" 
        v-for="(item, index) in goodsList" 
        :key="index"
        @click="goToDetail(item.id)"
      >
       <image class="goods-img" v-if="item.packageCoverImage" :src="item.packageCoverImage" mode="aspectFill"></image>
        <image class="goods-img" v-else src="/static/img/icon_haibao.png" mode="aspectFill"></image>
        <view class="goods-info">
          <text class="goods-title">{{item.name}}</text>
          <text class="goods-status" :style="{color: item.currentStock >0 ? '#4cd964' : '#ff3b30'}">
            {{item.currentStock >0 ? '有货' : '缺货'}}
          </text>
          <view class="price-section">
            <text class="current-price">¥{{item.newPrice}}</text>
            <text class="original-price" v-if="item.originalPrice">¥{{item.originalPrice}}</text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="load-more">
        <text v-if="loading">加载中...</text>
        <text v-else-if="noMore">没有更多了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      goodsList: [],
      page: 1,
      pageSize: 10,
      loading: false,
      noMore: false,
      scrollHeight: 0
    }
  },
  onLoad() {
    this.calculateScrollHeight();
   // this.getGoodsList();
    
    // 监听屏幕旋转
    uni.onWindowResize(() => {
      this.calculateScrollHeight();
    });
  },
  methods: {
    calculateScrollHeight() {
      // 计算scroll-view高度
      uni.getSystemInfo({
        success: (res) => {
          const query = uni.createSelectorQuery().in(this);
          query.select('.search-bar').boundingClientRect(data => {
            this.scrollHeight = res.windowHeight - data.height;
          }).exec();
        }
      });
    },
    
    // 获取商品列表
    async getGoodsList() {
      uni.showLoading({
      	title: '加载中'
      })
      this.$http('jeecg-boot/app/market/bicProduct/qyeryPage',{
      	name:this.searchText,
		pageNo:this.page,
		pageSize:10,
		
      },'POST').then(res => {
      		   //console.log(res)
      	 uni.hideLoading();
      	 var goodsList=res.result.records
		 goodsList.forEach(item=>{
		  	 			
			 var newPrice=item.currentPrice+item.admJianNum
			 item.newPrice=newPrice.toFixed(2)
		  	 			 
		 })
		 this.goodsList=[...this.goodsList, ...goodsList]
       })
    },
    
    // 模拟商品数据
    mockGoodsData() {
      const statusList = [0, 1]; // 0-缺货 1-有货
      const mockList = [];
      const count = this.page === 3 ? 3 : this.pageSize; // 模拟第三页数据不足
      
      for (let i = 0; i < count; i++) {
        const status = statusList[Math.floor(Math.random() * statusList.length)];
        const hasDiscount = Math.random() > 0.5;
        
        mockList.push({
          id: (this.page - 1) * this.pageSize + i + 1,
          name: `商品${(this.page - 1) * this.pageSize + i + 1}`,
          image: 'https://via.placeholder.com/150',
          status: status,
          currentPrice: (Math.random() * 100 + 10).toFixed(2),
          originalPrice: hasDiscount ? (Math.random() * 150 + 30).toFixed(2) : null
        });
      }
      
      return mockList;
    },
    
    // 搜索商品
    handleSearch() {
      this.page = 1;
      this.goodsList = [];
      this.getGoodsList();
    },
    
    // 清空搜索
    clearSearch() {
      this.searchText = '';
    },
    
    // 取消搜索
    cancelSearch() {
      uni.navigateBack();
    },
    
    // 加载更多
    loadMore() {
      this.getGoodsList();
    },
    
    // 跳转商品详情
    goToDetail(id) {
      uni.navigateTo({
        url: `goodsDetail?id=${id}`
      });
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-input {
  flex: 1;
  height: 70rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  margin-right: 20rpx;
}

.search-input input {
  flex: 1;
  height: 100%;
  padding: 0 15rpx;
  font-size: 28rpx;
}

.clear-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-btn {
  font-size: 30rpx;
  color: #666;
}

/* 商品列表样式 */
.goods-list {
  background-color: #f5f5f5;
  padding: 20rpx;
}

.goods-item {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.goods-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-title {
  font-size: 30rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.goods-status {
  font-size: 26rpx;
  margin-top: 10rpx;
}

.price-section {
  display: flex;
  align-items: center;
  margin-top: 15rpx;
}

.current-price {
  font-size: 36rpx;
  color: #ff3b30;
  font-weight: bold;
  margin-right: 15rpx;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  font-size: 28rpx;
  color: #999;
}
</style>